<template>
  <view class="box">
    <view class="top">
      <img src="/static/image/orange_defen@2x.png" alt="" width="100%" />
      <view class="text">
        {{dtlist.answersheet.fScore}}
        <span class="text1">分</span>
      </view>
      <view class="text2"> 再接再厉 </view>
    </view>
    <view class="middle">
      <view class="m_l">
        <p style="font-size: 30rpx">答对提数</p>
        <p style="text-align: center; font-size: 56rpx">
          {{ numberTopic.numberWrong }}
        </p>
      </view>
      <view class="m_r">
        <p style="font-size: 30rpx">答错提数</p>
        <p style="text-align: center; font-size: 56rpx">
          {{ numberTopic.numberAnswer}}
        </p>
      </view>
    </view>

    <view class="con">
      <view class="title">
        <span class="t1"> 答题卡</span>
        <span class="t2">
          <span class="t22"> <view class="dian1"> </view>正确 </span>
          <span class="t22"> <view class="dian2"> </view>错误 </span>
        </span>
      </view>
      <view class="card">
        <view
          class="all-li"
          v-for="(item, index) in dtlist.answerList"
          :key="index"
          @click="temp(index)"
        >
          <view
            class="all-li-1"
            :style="{
              background: item.answerStatus ? '#52d99f' : '#f9775a',
            }"
          >
            {{ index+1 }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {

        numberTopic: {
          numberAnswer: 2,
          numberWrong: 0,
        },
        daTi: [
          {
            id: 1,
            answer: true,
            type: 1,
          },
          {
            id: 2,
            answer: true,
            type: 1,
          },
        ],
		dtlist:[],
      }

  },
  onLoad() {
	  this.getall()
  var pages = getCurrentPages();//获取页面
  var beforePage = pages[pages.length-2].route;//上个页面
  console.log(beforePage);
  if(beforePage=='pages/apply/ontest/dati/index'){
	  location.reload()

  }else{
	
  }
  },


  methods: {
	  getall(){
		  
		  // console.log(localStorage.getItem('anserlist'));
		  this.dtlist=JSON.parse(localStorage.getItem('anserlist'))
	
		  let f = 0
		  for(var a =0;a<this.dtlist.answerList.length;a++){
		  	
		  	if(this.dtlist.answerList[a].answerStatus=='error'){
		  		this.dtlist.answerList[a].answerStatus=false;
		  		f++
		  	}else{
		  		this.dtlist.answerList[a].answerStatus=true;
		  	}
		  	
		  }
		  this.numberTopic.numberAnswer=f
		  this.numberTopic.numberWrong=this.dtlist.answerList.length-f
		  
	
	  },
    deFen() {
      request({
        url: "/api/system/DataInterface/353882481927128325/Actions/Response",
        method: "POST",
        Headers: { "Content-Type": "application/json;charset=UTF-8" },
        data: JSON.stringify(query),
      }).then((res) => {
		  
	  });
    },
    temp(index) {
		// console.log(,index);
      uni.navigateTo({
        url:
          `/pages/apply/ontest/xiangqing/index?aid=${this.dtlist.answersheet.fId}&id=${this.dtlist.answerList[index].fTestquestionsid}&index=${index+1}&length=${this.dtlist.answerList.length}`,
        fail: (err) => {
          this.$u.toast("暂无此页面");
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.con {
  width: 700rpx;
  height: 886rpx;
  margin-left: 25rpx;
  background-color: #f8f8f8;
  .card {
    height: 940rpx;

    .all-li {
      width: 80rpx;
      height: 80rpx;
      background-color: #f8f8f8;
      border-radius: 50%;

      float: left;
      margin-left: 48rpx;
      margin-right: 10rpx;
      margin-top: 50rpx;
      .all-li-1 {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
      }
    }
    .text {
      height: 100rpx;
      font-size: 40rpx;
      font-weight: 500;
      line-height: 100rpx;
      text-align: center;
    }
  }
  .title {
    height: 104rpx;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;

    .t1 {
      width: 120rpx;
      height: 56rpx;
      font-size: 40rpx;
      line-height: 56rpx;
    }

    .t2 {
      width: 400rpx;
      display: flex;
      justify-content: space-evenly;

      .t22 {
        display: flex;
        justify-content: space-around;
        align-items: center;

        .dian1 {
          width: 20rpx;
          height: 20rpx;
          border-radius: 50%;
          background-color: #52d99f;
        }

        .dian2 {
          width: 20rpx;
          height: 20rpx;
          border-radius: 50%;
          background-color: #f9775a;
        }
      }
    }
  }
}

.middle {
  height: 228rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.top {
  height: 512rpx;
  position: relative;

  .text {
    width: 240rpx;
    text-align: center;
    position: absolute;
    top: 186rpx;
    left: 260rpx;
    font-size: 92rpx;
    color: #fff;

    .text1 {
      font-size: 52rpx;
    }
  }

  .text2 {
    color: #d95b28;
    font-size: 44rpx;
    position: absolute;
    left: 290rpx;
    top: 330rpx;
  }
}
</style>
